<template>
  <div>
    <navbar :showHeaderIcon="true" />
    <div class="app-container">
      <div class="listBox">
            <div class="mainContent-box-head">选择分析单位</div>
            <div v-if="lookType.teacherAnalysisQuery==null&&lookType.teacherGradeQuery==null">
              <el-empty description="暂无数据"></el-empty>
            </div>
            <div style="display: flex;flex-wrap: wrap;height: 100%;overflow: auto;background:#fff;justify-content: center;margin-top:15px;padding-top:50px;">
              <div class="university-level" v-if="lookType.teacherAnalysisQuery==1&&lookType.teacherAnalysisQuery!=null">
                  <div style="display: flex;justify-content: space-between;align-items: center;">
                      <div style="display: flex;align-items: center;">
                          <div style="width: 24px;height: 24px;border-radius: 50%;background-color: #307AF2;margin-right: 8px;display: flex;align-items: center;justify-content: center;">
                          <img style="width: 16px;height: 14px;" src="../../assets/images/filter.png" alt="">
                          </div>
                          <div style="font-size: 17px;font-weight: 600;">校级分析报告</div>
                      </div>
                      <!-- <el-button @click="clickToEnter" style="background-color: #307AF2;" type="primary">点击进入</el-button> -->
                      <el-popover
                      placement="right"
                      trigger="click">
                      <div class="glassschool" v-if="xmxx.selectTypeName=='3+1+2'">
                          <div style="margin: 8px 6px 10px 6px">点击进入</div>
                          <span @click="handleCommand('xjfxbg',2)">校级分析报告(物理)</span>
                          <span @click="handleCommand('xjfxbg',1)">校级分析报告(历史)</span>
                      </div>
                      <div class="glassschool" v-else>
                          <div style="margin: 8px 6px 10px 6px" @click="handleCommand('xjfxbg',0)">点击进入</div>
                      </div>
                      <el-button slot="reference" style="background-color: #307AF2;" type="primary">点击进入</el-button>
                      </el-popover>
                  </div>
                  <div>
                      <div style="color: #494949;font-weight: 600;margin-top: 8px;">成绩分析：</div>
                      <div style="color: #86909C;font-size: 15px;margin-top: 5px;">包含考试总览、学生排行榜、班级综合对比、分数段分布、名次段分布、优秀生分布、各科平均分对比。</div>
                      <div style="color: #494949;font-weight: 600;margin-top: 8px;">上线分析：</div>
                      <div style="color: #86909C;font-size: 15px;margin-top: 5px;">包含上线情况、上线人数对比、命中率贡献率、上线均分对比、临界生。</div>
                  </div>
              </div>
              <div style="margin:0 70px;position: relative;" class="university-level" v-if="lookType.teacherAnalysisQuery==1&&lookType.teacherAnalysisQuery!=null" >
                  <div style="display: flex;justify-content: space-between;align-items: center;">
                      <div style="display: flex;align-items: center;">
                          <div style="width: 24px;height: 24px;border-radius: 50%;background-color: #307AF2;margin-right: 8px;display: flex;align-items: center;justify-content: center;">
                          <img style="width: 16px;height: 14px;" src="../../assets/images/filter.png" alt="">
                          </div>
                          <div style="font-size: 17px;font-weight: 600;">班级分析报告</div>
                      </div>
                      <el-popover
                      placement="right"
                      trigger="click">
                          <div class="glassschool">
                              <div style="margin: 8px 6px 10px 6px">选择班级</div>
                              <span v-for="item in classList" :key="item.id" @click="handleCommand1('bjfxbg',item.id)">{{item.className}}</span>
                          </div>
                          <el-button slot="reference" style="background-color: #307AF2;" type="primary">选择班级</el-button>
                      </el-popover>
                  </div>
                  <div>
                      <div style="color: #494949;font-weight: 600;margin-top: 8px;">成绩分析：</div>
                      <div style="color: #86909C;font-size: 15px;margin-top: 5px;"> 包含考试总览、学生排行榜、班级综合对比、分数段分布、名次段分布、优秀生分布、各科平均分对比、学科均衡分析。</div>
                      <div style="color: #494949;font-weight: 600;margin-top: 8px;">上线分析：</div>
                      <div style="color: #86909C;font-size: 15px;margin-top: 5px;"> 包含上线情况、科目上线分析、临界生。</div>
                  </div>
              </div>
              <div class="university-level"  v-if="lookType.teacherGradeQuery==1&&lookType.teacherGradeQuery!=null">
                  <div style="display: flex;justify-content: space-between;align-items: center;">
                      <div style="display: flex;align-items: center;">
                          <div style="width: 24px;height: 24px;border-radius: 50%;background-color: #307AF2;margin-right: 8px;display: flex;align-items: center;justify-content: center;">
                          <img style="width: 16px;height: 14px;" src="../../assets/images/filter.png" alt="">
                          </div>
                          <div style="font-size: 17px;font-weight: 600;">校级学生成绩单</div>
                      </div>
                      <el-button @click="handleCommand('cjdfx')" style="background-color: #307AF2;" type="primary">点击进入</el-button>
                  </div>
                  <div>
                      <div style="color: #494949;font-weight: 600;margin-top: 8px;">已出成绩：</div>
                      <div style="color: #86909C;font-size: 15px;margin-top: 5px;">总分(物理)(赋分)、总分(物理)、总分(历史)(赋分)、总分(历史)、语文、数学、英语、物理、化学(赋分)、化学、生物(赋分)、生物、政治(赋分)、政治、历史、日语</div>
                  </div>
              </div>
              <div style="margin:0 70px;position: relative;" class="university-level" v-if="lookType.teacherGradeQuery==1&&lookType.teacherGradeQuery!=null">
                  <div style="display: flex;justify-content: space-between;align-items: center;">
                      <div style="display: flex;align-items: center;">
                          <div style="width: 24px;height: 24px;border-radius: 50%;background-color: #307AF2;margin-right: 8px;display: flex;align-items: center;justify-content: center;">
                          <img style="width: 16px;height: 14px;" src="../../assets/images/filter.png" alt="">
                          </div>
                          <div style="font-size: 17px;font-weight: 600;">班级学生成绩单</div>
                      </div>
                      <!-- <el-button style="background-color: #307AF2;" type="primary">选择班级</el-button> -->
                      <el-popover
                      placement="right"
                      trigger="click">
                      <div class="glassschool">
                          <div style="margin: 8px 6px 10px 6px">选择班级</div>
                          <span v-for="item in classList" :key="item.id" @click="handleCommand1('cjdfx',item.id)">{{item.className}}</span>
                      </div>
                      <el-button slot="reference" style="background-color: #307AF2;" type="primary">选择班级</el-button>
                      </el-popover>
                  </div>
                  <div>
                      <div style="color: #494949;font-weight: 600;margin-top: 8px;">已出成绩：</div>
                      <div style="color: #86909C;font-size: 15px;margin-top: 5px;">总分(物理)(赋分)、总分(物理)、总分(历史)(赋分)、总分(历史)、语文、数学、英语、物理、化学(赋分)、化学、生物(赋分)、生物、政治(赋分)、政治、历史、日语</div>
                  </div>
                  <!-- <div ref="classAndGrades" class="glass">
                      <div style="margin: 8px 6px 10px 6px">选择班级</div>
                      <div @click="entryAnalysiss(item)" v-for="item in classList" :key="item.classid" style="display: flex;align-items: center;justify-content: space-between;width: 100%;height: 40px;background-color: #fff;box-sizing: border-box;padding: 9px;border-radius: 4px;margin: 6px 0;cursor: pointer;">
                          <div style="display: flex;align-items: center;color: #4E5969;font-size: 15px;"><div style="width: 10px;height: 10px;border-radius: 50%;background-color: #00C5FF;margin-right: 5px;"></div>{{ item.classname }}</div>
                      </div>
                  </div> -->
              </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import { debounce } from "lodash";
import { Navbar } from "@/layout/components";
import {getClassListScore,gradeQueryPermissionConfig} from "@/api/cjfx/cjfx"
export default {
  name: "Cjfx_fxzy",
  components: {
    Navbar,
  },
  data() {
    return {
        xmxx:{},
        classList:[],
        lookType:{}
    };
  },

  created() {
    
  },
    mounted(){
        this.xmxx = JSON.parse(sessionStorage.getItem('analysisXmxx'))
        this.getClassListScoretab(this.xmxx.id)
        this.gradeQueryPermissionConfigTap(this.xmxx.id)
    },
  methods: {
    async gradeQueryPermissionConfigTap(id){
      const res = await gradeQueryPermissionConfig(id)
      if(res.code==200){
        if(res&&res.data){
          this.lookType = res.data
        }else{
          this.lookType = {}
        }
      }else{
        this.$message({
          type:'warning',
          message:res.msg
        })
      }
    },
    handleCommand(command,type) {
      this.$store.dispatch("setXmxx", this.xmxx).then((res) => {
        this.$router.push("/cjfx/" + command+'?type='+type);
      });
    },
    handleCommand1(command,classId) {
      this.$store.dispatch("setXmxx", this.xmxx).then((res) => {
        this.$router.push("/cjfx/" + command+'?classId='+classId);
      });
    },
    async getClassListScoretab(id){
      let obj={
        examId:id
      }
      const res = await getClassListScore(obj)
      if(res.code==200){
        this.classList = res.data
      }else{
        this.$message({
          type:"warning",
          message:res.msg
        })
      }
    }
  },
};
</script>

<style lang='scss' scoped>
  .listBox{
    width:1200px;
    height:auto;
    margin:0 auto;
  }
  .university-level {
        width: 480px;
        height: 218px;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #E5E8EF;
        box-sizing: border-box;
        padding: 16px;
        margin-bottom: 40px;
    }
    .glass {
          width: 230px;
          padding: 15px 20px;
          box-sizing: border-box;
          padding: 10px;
          box-sizing: border-box;
          z-index: 999;
      }
      
      .mainContent-box-head {
          height: 50px;
          /* margin-top: 25px; */
          background-color: #fff;
          line-height: 50px;
          padding-left: 36px;
          box-sizing: border-box;
          
      }
      .glassschool{
        padding:0 15px;
        max-height:300px;
        overflow-y:auto;
      }
    .glassschool span{
        display: block;
        position: relative;
        padding-left:20px;
        line-height:26px;
        cursor: pointer;
      }
      .glassschool span::after{
        content:'';
        position: absolute;
        left:0;
        top:50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #00C5FF;
        margin-right: 10px;
      }
</style>